<!-- src/components/SurveillanceCard.vue -->
<template>
  <v-card elevation="0">
    <v-card variant="outlined">
      <v-card-text>
        <v-row>
          <v-col>
            <span class="text-subtitle-2 text-disabled font-weight-bold">{{ title }}</span>
            <div :class="subtitleClass">
              <h2 class="text-h2 mt-1 mb-0">{{ subtitle }}</h2>
            </div>
          </v-col>
        </v-row>
        <div :class="imageWrapperClass">
          <v-img :src="videoUrl" aspect-ratio="1.2"></v-img>
        </div>
        <div>
          <p class="text-right">*{{ description }}</p>
        </div>
      </v-card-text>
    </v-card>
  </v-card>
</template>

<script setup lang="ts">
// 定义组件的 props
import { computed } from 'vue';

const props = defineProps<{
  title: string;
  subtitle: string;
  videoUrl: string;
  description?: string;
}>();

// 计算属性，根据 subtitle 返回对应的类名
const subtitleClass = computed(() => {
  return {
    'rounded-box': true,
    'bg-light-green': props.subtitle === '餐厅外部监控',
    'bg-light-blue': props.subtitle === '餐厅内部监控'
  };
});

// 计算属性，根据 subtitle 返回图片包裹 div 的类名
const imageWrapperClass = computed(() => {
  return {
    'border-light-green': props.subtitle === '餐厅外部监控',
    'border-light-blue': props.subtitle === '餐厅内部监控'
  };
});
</script>

<style scoped>
/* 可根据需要添加样式 */
.rounded-box {
  border-radius: 8px; /* 圆角 */
  padding: 8px; /* 内边距 */
  margin-bottom: 8px; /* 底部间距 */
}

.bg-light-green {
  background-color: #d4edda; /* 浅绿色 */
}

.bg-light-blue {
  background-color: #d1ecf1; /* 淡蓝色 */
}

.border-light-green {
  border: 4px solid transparent; /* 初始透明边框 */
  border-radius: 45px; /* 圆角 */
  padding: 8px; /* 内边距，确保边框与图片之间有间隔 */
  animation: borderAnimationGreen 2s infinite; /* 动画效果 */
}

.border-light-blue {
  border: 4px solid transparent; /* 初始透明边框 */
  border-radius: 45px; /* 圆角 */
  padding: 8px; /* 内边距，确保边框与图片之间有间隔 */
  animation: borderAnimationBlue 2s infinite; /* 动画效果 */
}

/* 动画定义 */
@keyframes borderAnimationGreen {
  0% {
    border-color: rgba(212, 237, 218, 0.5); /* 透明 */
  }
  25% {
    border-color: rgba(212, 237, 218, 0.8); /* 半透明浅绿色 */
  }
  50% {
    border-color: rgba(212, 237, 218, 1); /* 完全可见的浅绿色 */
  }
  75% {
    border-color: rgba(212, 237, 218, 0.8); /* 半透明浅绿色 */
  }
  100% {
    border-color: rgba(212, 237, 218, 0.5); /* 透明 */
  }
}

@keyframes borderAnimationBlue {
  0% {
    border-color: rgba(209, 236, 241, 0.3); /* 透明 */
  }
  25% {
    border-color: rgba(209, 236, 241, 0.5); /* 半透明淡蓝色 */
  }
  50% {
    border-color: rgba(209, 236, 241, 1); /* 完全可见的淡蓝色 */
  }
  75% {
    border-color: rgba(209, 236, 241, 0.5); /* 半透明淡蓝色 */
  }
  100% {
    border-color: rgba(209, 236, 241, 0.3); /* 透明 */
  }
}
</style>
